<template>
  <span v-if="historyStore && historyStore.showHistoryTips" class="history__tips cursor" @click="handleToLatestHistory">
    <svg-icon icon-class="double-arrow" class="arrow__btn fs-16 fs-c-5"></svg-icon>
    <span class="fs-c-5">继续上次对话</span>
  </span>
</template>

<script>
import { getHistory } from '@/api/chat'
import { mapGetters } from 'vuex'
// import HistoryContent from './content.vue'
export default {
  name: 'History',
  components: {
    // HistoryContent
  },
  inject: ['setHistoryMessage', 'detectIsLogin'], // 接收一个方法
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['historyStore', 'hasLogin', 'userInfo'])
  },
  created () {
  },
  watch: {
    'hasLogin' () {
      this.detechHistory()
    }
  },
  mounted () {
    this.detechHistory()
  },
  methods: {
    async detechHistory  () {
      if (!this.hasLogin) {
        // eslint-disable-next-line sonarjs/no-duplicate-string
        this.$store.dispatch('history/setHistoryTips', false)
        return
      }
      const { data } = await getHistory({ page: 1 })
      const list = data?.conversations || []
      if (list.length === 0) {
        this.$store.dispatch('history/setHistoryTips', false)
      } else {
        this.$store.dispatch('history/setHistoryTips', true)
      }
    },

    async handleToLatestHistory  () {
      if (!this.detectIsLogin()) return
      const { data } = await getHistory({ page: 1, page_size: 1 })
      const list = data?.conversations || []
      if (list.length === 0) {
        this.$PsMessage({ message: '请稍候重试或联系客服' })
        return
      }
      await this.setHistoryMessage(list[0])
    }
  }
}

</script>

<style lang="scss" scoped>
.history__tips {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 0 0;
  font-size: 12px;
  @include flex-center;
  gap: 5px;
  .arrow__btn {
    // transform: rotate(-90deg);
  }
  &:hover {
    span, svg {
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
